<template>
	<view>
		<topbar title="广告列表" background="background:#FFDE21"></topbar>
		<view class="r_btn dis_f_l_c" @click="go_fb">
			<image src="../../static/icon/xfj.png" mode=""></image>
			<view>发布广告</view>
		</view>
		<view class="s_banxin dis_f_c_c">
			<view class="search dis_f_l_c">
				<image src="../../static/icon/search.png" mode=""></image>
				<u-input v-model="search_text" height="32" @input='aa'></u-input>
			</view>
		</view>
		<view class="content">
		<!-- 	<view class="btn dis_f_sb_c" >
				<view class="button dis_f_co_c_c" v-for="(item,index) in cates" @click="go_part1(item.id)">
					<image :src="item.pic" mode=""></image>
					<view>{{item.name}}</view>
				</view>
			</view> -->
			<view style="padding: 36rpx 24rpx;">
				
				<view class="guang_gao" v-for="(item,index) in list" @click="go_xq(item.id)">
					<view class="info_part dis_f_sb_c">
						<view class="dis_f_l_c">
							<image class="tx" :src="item.user.avatar" mode=""></image>
							<view class="dis_f_co_l_c">
								<view class="title">{{item.user.name}}</view>
								<view class="dis_f_l_c">
									<image v-if="item.istop == 1" style="margin-right: 12rpx;height: 36rpx;width: 96rpx;" src="../../static/icon/zhiding.gif" mode=""></image>
									<image v-if="item.is_refresh == 1" style="margin-right: 12rpx;height: 36rpx;width: 96rpx;" src="../../static/icon/shuaxin.gif" mode=""></image>
									<image v-if="item.isred == 1" style="margin-right: 12rpx;height: 36rpx;width: 96rpx;" src="../../static/icon/hongbao.gif" mode=""></image>
									<image v-if="item.user.isvip == 1" style="margin-right: 12rpx;height: 36rpx;width: 96rpx;" src="../../static/icon/vip.gif" mode=""></image>
									
								</view>
							</view>
						</view>
					</view>
					<view class="gg_title hh">
						{{item.content}}
					</view>
					<view class="gg_img dis_f_l_c dis_f_w">
						<!-- <view v-if="item.picnum >4" class="img_more dis_f_co_c_c" >
							查<br>看<br>更<br>多<br></view> -->

						<image v-for="(img, i) in item.pic" :key="i" :src="img" :data-src="img" @click.stop="previewOpen(item,img)">
						</image>

					</view>
					
				<view class="b_btn dis_f_l_c">
					<view class="dis_f_l_c" style="margin-right: 60rpx;">
						<image style="width: 33.97rpx;height: 24.75rpx;" src="../../static/index/s_btn1.png"
							mode=""></image>
						<view>{{item.visit}}</view>
					</view>
					<view class="dis_f_l_c" style="margin-right: 60rpx;">
						<image style="width: 32.74rpx;height: 32.88rpx;" src="../../static/index/s_btn2.png"
							mode=""></image>
						<view>{{item.talknum}}</view>
					</view>
					<view class="dis_f_l_c" style="margin-right: 60rpx;" @click.stop="share(index)">
						<image style="width: 32.33rpx;height: 32.33rpx;" src="../../static/index/s_btn3.png"
							mode=""></image>
						<view>分享</view>
					</view>
					<view class="dis_f_l_c" style="margin-right: 60rpx;" @click.stop="love(item.id,index)">
						<image v-if="item.islove" style="width: 34rpx;height: 29.56rpx;" src="../../static/index/hx.png" mode="">
						</image>
						<image  v-else style="width: 34rpx;height: 29.56rpx;" src="../../static/index/s_btn4.png" mode="">
						</image>
						
						<view>{{item.love}}</view>
					</view>
				</view>
					<view class="more">
						<image src="../../static/index/more.png" mode=""></image>
					</view>
					
				</view>
				<view style="padding-bottom: 100rpx;">
					<u-loadmore :status="status" />
				</view>
			</view>
			
		</view>
		
	</view>
	
</template>

<script>
	
	export default {
		
		data() {
			return {
				search_text: '',
				ck_more: true,
				h_b: false,
				imgs: [
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01467457773a5f0000018c1b8aed74.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625210874&t=d6e466f7906fa0b38a642d9c8f9f9730',
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
				],
				imgs2: [
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01467457773a5f0000018c1b8aed74.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625210874&t=d6e466f7906fa0b38a642d9c8f9f9730',
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
				],
				list:[
					
				],
				cate:0,
				cates:[],
				hot:0,
				zys:'',
				status: 'nomore	',
				page:1,
			};
		},
		onLoad(e) {
			this.cate = e.cate
			console.log(e)
			this.hot = e.hot
			// this.get_guang();
			this.$.ajax(1, 'post', 'index/guangcate', {
			}, (res) => {
				console.log(res)
				if(res.code == 1){
					this.cates = res.data
				}
				
			})
		},
		onShow() {
			this.get_guang()
		},
		methods: {
			
			get_guang(){
				this.$.ajax(1, 'post', 'index/getguang', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					status:1,
					cate:this.cate,
					page:this.page,
					hot:this.hot,
				}, (res) => {
					// console.log(res.list[0].user)
					if(res.code == 1){
						// this.list = res.list
						this.zys = res.pagecount
						if(res.list != ''){
							res.list.forEach((item,index)=>{
								this.list.push(item);
							})
							// console.log(this.lists)
							// this.status = 'loading';
						}
					}
					
				})
			},
			share(e){
				uni.share({
					 provider: "weixin",
					 scene: "WXSceneSession",
					 type:0,
					 href: "/pages/guang_gao/guang_gao?id="+this.list[e].id,
					 title: this.list[e].user.name,
					 summary: this.list[e].content,
					 imageUrl: this.list[e].pic[0],
					   success: function (res) {
					         console.log("success:" + JSON.stringify(res));
					     },
					     fail: function (err) {
					         console.log("fail:" + JSON.stringify(err));
					     }
				})
			},
			love(e,index){
				this.$.ajax(1, 'post', 'index/getguanglove', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:e
				}, (res) => {
					// console.log(res.list[0].user)
					if(res.code == 1){
						this.list[index].love = this.list[index].love + 1
						this.list[index].islove =1
						// this.getguang(e)
					}else{
						this.list[index].love = this.list[index].love - 1
						this.list[index].islove =0
						// this.getguang(e)
					}
					
				})
			},
			go_part1(e){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
						this.$.open('/pages/guang_gao/gg_list?cate='+e)
					}
				})
				
			},
			aa(){
				this.$.ajax(1, 'post', 'index/getguang', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					status:1,
					cate:this.cate,
					keywords:this.search_text
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.list = res.list
					}else{
						this.list = []
					}
					
				})
			},
			go_fb() {
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
						this.$.open('/pages/guang_gao/fb')
					}
				})
			
			},
			go_xq(e) {
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
							this.$.open('/pages/guang_gao/guang_gao?id='+e)
					}
				})
				
			},
			//打开预览e
			previewOpen(e,img) {
				this.$.look_img(img,e.pic)
			},
			//长按事件
			longPress(data) {
				
				
			},
			onReachBottom() {
				// var xiabiao = this.current;
				console.log(111)
				if (this.page + 1 <= this.zys) {
					this.status = 'loading';
					this.page = ++this.page;
					console.log(this.page)
					this.get_guang();
				} else {
					this.status = 'nomore';
					return;
				}
			},
			// love(e,index){
			// 	this.$.ajax(1, 'post', 'index/getguanglove', {
			// 		uid:uni.getStorageSync('uid'),
			// 		token:uni.getStorageSync('token'),
			// 		id:e
			// 	}, (res) => {
			// 		// console.log(res.list[0].user)
			// 		if(res.code == 1){
			// 			this.list[index].love = this.list[index].love + 1
			// 		}else{
			// 			this.list.love[index] = this.list.love[index] - 1
			// 		}
					
			// 	})
			// }
		},
		// onReachBottom() {
		// 	// var xiabiao = this.current;
		// 	console.log(111)
		// 	if(this.page+1 <= this.zys){
		// 		this.status = 'loadmore'
		// 		this.page = ++this.page;
		// 		console.log(this.page)
		// 		this.get_guang();
		// 	}else{
		// 		this.status = 'nomore';
		// 		return;
		// 	}
		// },
		onPullDownRefresh(){
			this.list = []
			this.get_guang();
			
			setTimeout(function () {
			            uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.r_btn {
		position: fixed;
		z-index: 999;
		top: calc(var(--status-bar-height) + 22rpx);
		right: 48rpx;
		
		image {
			width: 32.99rpx;
			margin-right: 6rpx;
			height: 34rpx;
		}
	}
		.s_banxin {
			position: fixed;
			top: calc(var(--status-bar-height) + 88rpx);
			width: 100%;
			padding: 0 48rpx;
			background-color: #FFDE21;
			height: 88rpx;
			z-index: 999;
			.search {
				width: 100%;
				background-color: #fff;
				border-radius: 30rpx;
				padding: 14rpx 0 14rpx 30rpx;
				height: 60rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
			}

		}
	.content {
		width: 100%;
		top: calc(var(--status-bar-height) + 176rpx);
		z-index: 2;
		position: absolute;

		

		.guang_gao {
			position: relative;
			margin-bottom: 12rpx;
			width: 100%;
			// height: 594rpx;
			background-color: #fff;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			border-radius: 20rpx;
			padding: 36rpx 26rpx;

			.info_part {
				width: 100%;
				margin-bottom: 18rpx;

				.tx {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					margin-right: 26rpx;
				}

				.title {
					color: #222;
					line-height: 40rpx;
					font-size: 28rpx;
					margin-bottom: 12rpx;
				}

				.gg_btn {
					color: #fff;
					font-size: 24rpx;
					line-height: 16rpx;
					border-radius: 18rpx;
					margin-right: 12rpx;
				}
			}

			.gg_title {
				font-size: 26rpx;
				line-height: 33rpx;
				color: #222;
				margin-bottom: 24rpx;
			}

			.gg_img {
				width: 100%;
				margin-bottom: 48rpx;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-right: 12rpx;
					margin-bottom: 12rpx;
				}

				.img_more {
					position: absolute;
					color: #fff;
					height: 150rpx;
					font-size: 22rpx;
					right: 10rpx;
					width: 30rpx;
					background-color: rgba($color: #000000, $alpha: .2);
					border-radius: 0 10rpx 10rpx 0;
				}
			}


			.b_btn {
				font-size: 22rpx;
				color: #777;
				line-height: 32rpx;

				image {
					margin-right: 13rpx;
				}
			}

			.more {
				position: absolute;
				top: 36rpx;
				right: 40rpx;

				image {
					width: 32rpx;
					height: 8rpx;
				}
			}
		}
	}
</style>
